<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
            <el-breadcrumb-item>成绩筛选</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="24">
                <el-col :span="1"><el-button type="text" style="color: black">专业</el-button></el-col>
                <el-col :span="5">
                    <el-select @change="majorChange" v-model.number="queryInfo.major_id" filterable placeholder="请选择专业">
                        <el-option v-for="item in majorList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="1"><el-button type="text" style="color: black">年级</el-button></el-col>
                <el-col :span="3">
                    <el-select @change="gradeChange" v-model="queryInfo.grade_name" filterable placeholder="请选择年级">
                        <el-option v-for="item in gradeList" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="1"><el-button type="text" style="color: black">学期</el-button></el-col>
                <el-col :span="10">
                    <el-select v-model="queryInfo.semester_ids" multiple placeholder="请选择" filterable style="width: 100%">
                        <el-option v-for="item in semesterList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-top: 15px">
                <el-col :span="1"><el-button type="text" style="color: black">班级</el-button></el-col>
                <el-col :span="5">
                    <el-select v-model.number="queryInfo.class_id" filterable placeholder="请选择班级">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button type="text" style="color: black">
                        单学期挂科
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-input type="number" v-model.number="queryInfo.one_semester_fail_num"></el-input>
                </el-col>
                <el-col :span="1" style="padding-left: 0">
                    <el-button type="text" style="color: black">门</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button type="text" style="color: black">
                        多学期挂科
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-input type="number" v-model.number="queryInfo.mul_semester_fail_num"></el-input>
                </el-col>
                <el-col :span="1" style="padding-left: 0">
                    <el-button type="text" style="color: black">门</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button plain type="primary" @click="handleDownload" :loading="downloadLoading">导出 Excel <i class="el-icon-download el-icon--right"></i></el-button>
                </el-col>
                <el-col :span="4" class="right">
                    <el-button type="primary" icon="el-icon-search" @click="getScoreList">查询</el-button>
                </el-col>
            </el-row>
            <!-- 成绩列表区域 -->
            <el-table
                    max-height="600px"
                    :data="scoreList"
                    border stripe
                    :header-cell-style="table_header"
                    empty-text="暂无数据"
            >
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="stu_id" label="学号" align="center"></el-table-column>
                <el-table-column prop="student.name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="course.course_name" label="课程" align="center"></el-table-column>
                <el-table-column prop="score" label="分数" align="center"></el-table-column>
                <el-table-column prop="semester.name" label="学期" align="center"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                queryInfo: {
                    class_id: null,
                    grade_name: "2018级",
                    major_id: 1,
                    semester_ids: [5, 6],
                    one_semester_fail_num: 4,
                    mul_semester_fail_num: 5,
                },

                scoreList: [],
                semesterList: [],
                classList: [],
                majorList: [],
                gradeList: [],

                downloadLoading: false,
                filename: 'result',
            }
        },
        created() {
            this.getData();
        },
        methods: {
            table_header(row, column, rowIndex, columnIndex) {
                return 'background-color: #409EFF; color:white'
            },
            handleDownload() {
                this.downloadLoading = true;
                import('@/vendor/Export2Excel').then(excel => {
                    const tHeader = ['学号', '姓名', '课程', '分数', '学期'];
                    const filterVal = ['stu_id', 'name', 'course.course_name', 'score', 'semester.name'];
                    const list = this.scoreList;
                    const data = this.formatJson(filterVal, list);
                    excel.export_json_to_excel({
                        header: tHeader,
                        data,
                        filename: this.filename,
                        autoWidth: true,
                        bookType: 'xlsx',
                    });
                    this.downloadLoading = false
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => {
                    if (j.split('.').length === 2){
                        var key = j.split('.')[0];
                        var value = j.split('.')[1];
                        return v[key][value]
                    }
                    return v[j]
                }))
            },
            async getScoreList() {
                if (this.queryInfo.semester_ids.length === 0 ) return this.$message.error("必须选择学期");
                if (this.queryInfo.semester_ids.length === 1 && this.queryInfo.one_semester_fail_num === 0 ) return this.$message.error("必须选择学期挂科门数");
                if (this.queryInfo.semester_ids.length >= 2 && this.queryInfo.one_semester_fail_num === 0 && this.queryInfo.mul_semester_fail_num === 0 ) return this.$message.error("必须选择学期挂科门数");

                var query_info = JSON.parse(JSON.stringify(this.queryInfo));
                if (query_info.semester_ids.constructor === Array) {
                    query_info.semester_ids = query_info.semester_ids.join(',');
                }
                const {data: res, status: status} = await this.axios.get('score/getScoreFilter', {params: query_info});
                if (status !== 200) return this.$message.error("获取成绩列表失败");
                this.scoreList = res.data;
            },
            async getSemesterList() {
                const {data: res, status: status} = await this.axios.get("semester/getSemesterList");
                if (status !== 200) {
                    return this.$message.error('获取学期列表失败！')
                }
                this.semesterList = res.data.semesters;
                // this.queryInfo.semester_id = this.semesterList.slice(-1)[0].id
            },

            async getGradeList(){
                const {data: res, status: status} = await this.axios.get("grade/getRoleGrade");
                if (status !== 200) {
                    return this.$message.error('获取年级列表失败！')
                }
                this.gradeList = res.data;
                // this.queryInfo.grade_name = this.gradeList.slice(-1)[0];
            },

            async getMajorList(){
                const {data: res, status: status} = await this.axios.get("major/getRoleMajor");
                if (status !== 200) {
                    console.log(status);
                    return this.$message.error('获取专业列表失败！')
                }
                this.majorList = res.data;
                this.queryInfo.major_id = this.majorList.slice(0)[0].id;
            },

            async getData(){
                this.getScoreList();
                this.getSemesterList();
                this.getMajorList();
                this.getGradeList();
                this.getClassList();
            },
            async getClassList(){
                const {data: res, status: status} = await this.axios.get('class/getMajorClass',
                    {params: {"major_id": this.queryInfo.major_id, "grade": this.queryInfo.grade_name}}
                );
                if (status !== 200) {
                    return this.$message.error('获取班级列表失败！')
                }
                this.classList = res.data;
            },
            async majorChange(major_id){
                await this.getClassList();
            },
            async gradeChange(value){
                await this.getClassList();
            }
        },
    }
</script>
<style lang="less" scope>
</style>